<template>
  <div class="breadcrumb-wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <router-link to="/" class="breadcrumb-link">
          <el-icon><House /></el-icon>
          首页
        </router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item 
        v-for="(item, index) in breadcrumbs" 
        :key="index"
        :class="{ 'is-last': index === breadcrumbs.length - 1 }"
      >
        <router-link 
          v-if="item.path && index !== breadcrumbs.length - 1"
          :to="item.path" 
          class="breadcrumb-link"
        >
          {{ item.title }}
        </router-link>
        <span v-else class="breadcrumb-text">{{ item.title }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { House } from '@element-plus/icons-vue'

const route = useRoute()

// 路由面包屑映射
const routeBreadcrumbMap = {
  // 提前招生相关
  '/admission/registration': [
    { title: '提前招生', path: null },
    { title: '报名入口', path: null }
  ],
  '/admission/qualified': [
    { title: '提前招生', path: null },
    { title: '入围信息', path: null }
  ],
  '/admission/payment': [
    { title: '提前招生', path: null },
    { title: '缴费确认', path: null }
  ],
  '/admission/exam-outline': [
    { title: '提前招生', path: null },
    { title: '校测考纲', path: null }
  ],
  '/admission/admission-list': [
    { title: '提前招生', path: null },
    { title: '录取名单', path: null }
  ],
  
  // 院校信息
  '/schools': [
    { title: '院校信息', path: null }
  ],
  '/schools/:id': [
    { title: '院校信息', path: '/schools' },
    { title: '院校详情', path: null }
  ],
  
  // 专业信息
  '/majors': [
    { title: '专业信息', path: null }
  ],
  
  // 分数线查询
  '/score-lines': [
    { title: '分数线查询', path: null }
  ],
  
  // 政策资讯
  '/articles': [
    { title: '政策资讯', path: null }
  ],
  '/articles/:id': [
    { title: '政策资讯', path: '/articles' },
    { title: '文章详情', path: null }
  ],
  
  // 关于我们
  '/about': [
    { title: '关于我们', path: null }
  ],
  
  // 管理后台
  '/admin': [
    { title: '管理后台', path: null }
  ],
  '/admin/articles': [
    { title: '管理后台', path: '/admin' },
    { title: '文章管理', path: null }
  ],
  '/admin/categories': [
    { title: '管理后台', path: '/admin' },
    { title: '分类管理', path: null }
  ],
  '/admin/schools': [
    { title: '管理后台', path: '/admin' },
    { title: '院校管理', path: null }
  ],
  '/admin/majors': [
    { title: '管理后台', path: '/admin' },
    { title: '专业管理', path: null }
  ],
  '/admin/score-lines': [
    { title: '管理后台', path: '/admin' },
    { title: '分数线管理', path: null }
  ],
  '/admin/registration-entries': [
    { title: '管理后台', path: '/admin' },
    { title: '报名入口管理', path: null }
  ],
  '/admin/settings': [
    { title: '管理后台', path: '/admin' },
    { title: '系统设置', path: null }
  ]
}

// 计算面包屑数据
const breadcrumbs = computed(() => {
  const path = route.path
  
  // 直接匹配路径
  if (routeBreadcrumbMap[path]) {
    return routeBreadcrumbMap[path]
  }
  
  // 匹配动态路径（如 /articles/:id）
  for (const [pattern, breadcrumb] of Object.entries(routeBreadcrumbMap)) {
    if (pattern.includes(':')) {
      const regex = new RegExp('^' + pattern.replace(/:[^/]+/g, '[^/]+') + '$')
      if (regex.test(path)) {
        // 处理动态路径的面包屑
        let result = [...breadcrumb]
        
        // 如果是文章详情页，尝试获取文章标题
        if (pattern === '/articles/:id' && route.meta?.title) {
          result[result.length - 1].title = route.meta.title
        }
        // 如果是院校详情页，尝试获取院校名称
        else if (pattern === '/schools/:id' && route.meta?.title) {
          result[result.length - 1].title = route.meta.title
        }
        
        return result
      }
    }
  }
  
  // 如果没有匹配到，根据路径自动生成
  const segments = path.split('/').filter(segment => segment)
  if (segments.length === 0) return []
  
  // 简单的自动生成逻辑
  const autoGenerated = []
  let currentPath = ''
  
  for (let i = 0; i < segments.length; i++) {
    currentPath += '/' + segments[i]
    const isLast = i === segments.length - 1
    
    let title = segments[i]
    // 简单的中文映射
    const titleMap = {
      'admin': '管理后台',
      'admission': '提前招生',
      'schools': '院校信息',
      'majors': '专业信息',
      'articles': '政策资讯',
      'about': '关于我们'
    }
    
    if (titleMap[segments[i]]) {
      title = titleMap[segments[i]]
    }
    
    autoGenerated.push({
      title: title,
      path: isLast ? null : currentPath
    })
  }
  
  return autoGenerated
})
</script>

<style lang="scss" scoped>
.breadcrumb-wrapper {
  padding: 12px 0;
  margin-bottom: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 16px 20px;
  
  :deep(.el-breadcrumb) {
    font-size: 14px;
    line-height: 1.4;
    
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-weight: 400;
        color: #606266;
        
        &:hover {
          color: #409eff;
        }
        
        .el-icon {
          margin-right: 4px;
          vertical-align: middle;
        }
      }
      
      &.is-last {
        .el-breadcrumb__inner {
          color: #303133;
          font-weight: 500;
        }
      }
      
      .el-breadcrumb__separator {
        color: #c0c4cc;
        margin: 0 8px;
      }
    }
  }
  
  .breadcrumb-link {
    text-decoration: none;
    color: #606266;
    display: inline-flex;
    align-items: center;
    
    &:hover {
      color: #409eff;
    }
    
    .el-icon {
      margin-right: 4px;
      font-size: 14px;
    }
  }
  
  .breadcrumb-text {
    color: #303133;
    font-weight: 500;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .breadcrumb-wrapper {
    padding: 12px 16px;
    margin-bottom: 16px;
    
    :deep(.el-breadcrumb) {
      font-size: 13px;
      
      .el-breadcrumb__item {
        .el-breadcrumb__separator {
          margin: 0 6px;
        }
      }
    }
    
    .breadcrumb-link {
      .el-icon {
        font-size: 13px;
        margin-right: 3px;
      }
    }
  }
}
</style>